    <!-- 头部 -->
    <%- include('header', { title: "班级列表" }); -%>
    <!-- /头部 -->
    <!-- 主体内容 -->
    <div class="content">
        <!-- 侧边栏 -->
        <%- include('menu', { active: "class" }); -%>
        <!-- 侧边栏 -->
        <div class="main">
            <!-- 分类标题 -->
            <div class="title">
                <h4>班级列表</h4>
                <span><%= data.length %>条记录</span>
                <a href="http://localhost:3000/class/add" class="btn btn-primary new">新增班级</a>
            </div>
            <!-- /分类标题 -->
            <!-- 内容列表 -->
            <% if (!data.length) { %>
            <p>班级列表为空，请先进行添加班级操作</p>
            <%} else { %>
            <table class="table table-striped table-bordered table-hover custom-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>班级名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <% for(let key in data){ %>
                    <tr>
                        <td><%= +key + 1 %></td>
                        <td><%= data[key].className %></td>
                        <td>
                            <a href="http://localhost:3000/class/edit?id=<%= key %> " class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove delete" data-toggle="modal" data-target=".confirm-modal" data-id="<%= key %>"></i>
                        </td>
                    </tr>
                    <% } %>
                </tbody>
            </table>
            <% } %>
            <!-- /内容列表 -->
        </div>
    </div>
    <!-- /主体内容 -->
    <!-- 删除确认弹出框 -->
    <div class="modal fade confirm-modal">
        <div class="modal-dialog modal-lg">
            <form class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">请确认</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这个班级吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="handledel">
                        确定
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- /删除确认弹出框 -->
    <%- include('footer'); -%>
    </body>
    <script>
        let delId = ""
        // $(".delete")是一个数组
        // console.log($(".delete"));
        $(".delete").on("click", function () {
            // 获取用户id
            delId = $(this).attr("data-id");
            // console.log(delId);
        });
        $("#handledel").on("click", function () {
            if (delId !== "") {
                var dataObj = {
                    id: delId,
                };
                $.ajax({
                    type: "DELETE",
                    url: "http://localhost:3000/class",
                    data: dataObj,
                    dataType: "json",
                    success: (res) => {
                        if (res.err) {
                            toastr.error(res.msg);
                        } else {
                            // 刷新页面
                            location.replace(location.href);
                        }
                    },
                    error: () => {
                        toastr.error("删除失败");
                    },
                });
            }else{
                toastr.error("找不到要删除的数据");
            }
        });  
    </script>
    </html>